<template>
	<view class="content">
		<uni-row class="row">
				<uni-col class="left" :span="5">
					<view :class="{item:true,active:currentMenuId===menu.id}"  @click="doShow(menu.id)"  v-for="menu in  menuData">
						{{menu.name}}
					</view>
					
				</uni-col>
				<uni-col :span="19">
						<view  class="goods-item" v-for="item  in   tableData">
							<image :src="item.imgUrl"></image>
							<view>
								<view >{{item.name}}</view>
								<view>{{item.price}}</view>
								<view style="text-align: right; width: 300rpx;">
									<image   @click="doShowDetail(item.id)"  style="width: 50rpx; height: 50rpx;" src="../../static/add.png"></image>
								</view>
							</view>
						</view>
				</uni-col>
		</uni-row>
		
		
		
	</view>
</template>

<script setup>
import { ref   ,onMounted} from 'vue';

	
	const  tableData=ref([])
	
	
	//菜单分类数组
	const  menuData  =ref([])
	const  currentMenuId =ref('')
	const query = () => {
		//网络请求
		uni.request({
			url: `http://localhost:3000/catalogs`,
			success: (res) => {
				menuData.value =res.data;
				currentMenuId.value =	menuData.value[0].id
				queryGoodsByCatalogId(currentMenuId.value);
				
			}
		});
		
	}
	
	onMounted(  () => {
			  query()
		
	
	})
	const  doShow =(id)=>{
		currentMenuId.value  =id;
		queryGoodsByCatalogId(id)
		
		
	}
	
	//根据类别的编号查询商品
	const queryGoodsByCatalogId =(id)=>{
		uni.request({
			url: `http://localhost:3000/goods?catalogId=${id}`,
			success: (res) => {
				tableData.value =res.data;
				
			}
		});
		
	}
	
	
	const  doShowDetail  =(id)=>{
		uni.navigateTo({
			url: `/pages/detail/detail?id=${id}`
		});
	}
	
	
	
	

</script>

<style  scoped>
	
	.content {
			height: 80vh;
	}
	
	
	.left{
		height: 80vh;
	}  
	
	.item{
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		background-color: aliceblue;
		
	
	}
	
	.active  {
		border-left: 10rpx  solid  green;
		font-weight: bold;
		color: forestgreen;
		background-color: white;
	}
	
	
	
	.goods-item {
		height: 300rpx;
		/* 		background-color: black; */
		margin: 10rpx;
		margin-bottom: 50rpx;
		background-color: white;
		display: flex;
		flex-direction: row;
		padding: 10rpx;
	
	
	}
	
	.goods-item image {
		width: 250rpx;
		height: 300rpx;
	
	}
	
	

</style>
